<template>
    <div class="master-details">
        <div class="div-placeholder"></div>
        <div class="info-section">
            <div class="img-div">
                <img class="head-icon" :src="masterInfo.imgUrl"/>
            </div>
            <p class="name">{{masterInfo.name}}</p>
            <div class="info-cell">
                <div class="left">职务：</div>
                <div class="right">{{masterInfo.job}}</div>
            </div>
            <div class="info-cell">
                <div class="left">行业经验：</div>
                <div class="right">{{masterInfo.exp}}年</div>
            </div>
            <div class="info-cell">
                <div class="left">好评率：</div>
                <div class="right">
                    <span v-for="i in masterInfo.level" class="iconfont icon-xingxing" :key="i"></span>
                </div>
            </div>
            <div class="info-cell">
                <div class="left">个人简介：</div>
                <div class="right intro">
                    <p class="dec-item" v-for="(dec,decIndex) in masterInfo.decs" :key="decIndex">
                      {{dec}}
                    </p>
                </div>
            </div>
            <div class="info-cell">
                <div class="left">擅长项目：</div>
                <div class="right good-at">{{masterInfo.goodAt}}</div>
            </div>
            <div class="amount-div">
                <span>当前预约数：{{masterInfo.curAppointment}}，剩余预约数{{masterInfo.leftAppointment}}</span>
            </div>
        </div>
        <div class="bottom-btn-container">
          <mt-button size="large" class="bottom-btn buy-btn" type="default" @click.native="appointmentHandle">立即预约</mt-button>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import Vue from "vue";
import { Button } from "mint-ui";
import "mint-ui/lib/button/style.css";
import { savaToLocal, loadFromlLocal } from "../../common/js/storage.js"; // 公共方法：本地缓存

Vue.component(Button.name, Button);

export default {
  name: "master-details",
  data() {
    return {
      masterInfo:{}
    };
  },
  components: {},
  mounted() {
    this.masterInfo = loadFromlLocal('dianwu2',"masterInfo");
  },
  computed: {
    ...mapState(["openid", "soursePath"])
  },
  methods: {
    appointmentHandle() {
      console.log("点击了预约");
      window.location.href = "tel:" + this.masterInfo.phone;
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.master-details {
    box-sizing border-box;
    min-height: 100%;
    width: 100%;
    background: url('../../assets/bg_2.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: #f2f2f2;
    padding-bottom .64rem;

    .div-placeholder {
        width: 100%;
        height: 0.8rem;
        opacity: 0;
    }

    .info-section {
        box-sizing border-box;
        padding .22rem .18rem 0 .18rem;
        position: relative;
        background-color: #fff;
        width: 2.9rem;
        margin: 0 auto;
        border-radius: 0.06rem;
        box-shadow: 0 4px 8px rgba(80, 80, 80, 0.1);

        .img-div {
            position: absolute;
            font-size: 0;
            left .18rem;
            top -.5rem;

            .head-icon {
                border-radius: 50%;
                width: 0.82rem;
                height: 0.82rem;
                box-shadow: 0 2px 6px rgba(244, 187, 216, 0.6);
            }
        }

        .name {
            margin: 0.05rem 0 0.2rem 0;
            text-align: center;
            font-size: 0.17rem;
            font-weight: 700;
            color: #2a2a2a;
        }

        .info-cell{
            color #515151;
            font-size .14rem;
            display flex;
            align-items center;
            min-height .38rem;
            border-bottom 1px #eee dashed;
            .left{
                flex 0 0 .74rem;
            }
            .right{
                flex 1;
                line-height .19rem;
                &.good-at{
                    margin .09rem 0;
                }
                &.intro{
                    margin .09rem 0;
                }
                .icon-xingxing{
                    font-size .17rem;
                    color #fc63aa;
                    margin-right 0.01rem;
                }
            }
        }

        .amount-div{
            font-size .14rem;
            height .54rem;
            color #f659a4;
            display flex;
            align-items center;
        }
    }

    .bottom-btn-container {
        position: fixed;
        box-sizing: border-box;
        max-width: 750px;
        width: 100%;
        transform: translate3d(-50%, 0, 0);
        -webkit-transform: translate3d(-50, 0, 0);
        left: 50%;
        height: 0.4rem;
        padding: 0 0.05rem;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;

        .bottom-btn {
            width: 100%;
            font-size: 0.13rem;
            letter-spacing: 0.02rem;
            height: 0.32rem;
            box-shadow: none;
            border-radius: 0.03rem;
            background-color: #f394ba;
            color: #fff;
        }
    }
}
</style>
